<template>
  <div class="applydetail-container nav-bar-top">
    <!-- 导航栏 -->
    <van-nav-bar class="nav-bar" title="服务单详情" left-arrow @click-left="$router.back()"/>
    <van-steps :active="active" class="status">
      <van-step>提交申请</van-step>
      <van-step class="middle">处理中</van-step>
      <van-step>完成</van-step>
    </van-steps>
    <van-cell @click="$router.push('/applyTimeLine')" class="return-info circle-bg" :title="applyTip" :label="returnInfo.updateTime">
      <div slot="default"><van-icon name="arrow" size="15"/></div>
    </van-cell>
    <van-cell class="return-money circle-bg" title="退款总额">
      <div slot="default">¥{{returnInfo.returnAmount | fentoyuan}}</div>
    </van-cell>
    <!-- 商品信息 -->
    <div class="order-goods-list circle-bg">
      <div class="order-goods-item" v-for="(apply, index) in returnInfo.returnApplyItemList" :key="index">
        <van-image :src="apply.goodsPic" />
        <div class="goods">
          <span class="title van-multi-ellipsis--l2">{{apply.goodsName}}</span>
          <span class="num">x{{apply.goodsNum}}</span>
          <span class="price">¥{{apply.goodsPrice | fentoyuan}}</span>
        </div>
      </div>
    </div>
    <!-- 支付信息 -->
    <div class="pay-info circle-bg">
      <div class="item"><span class="title">服务单号:</span><span class="text">{{returnInfo.returnSn}}</span></div>
      <div class="item"><span class="title">申请时间:</span><span class="text">{{returnInfo.applyTime}}</span></div>
      <div class="item"><span class="title">售后类型:</span><span class="text">{{returnInfo.showReturnType}}</span></div>
    </div>
    <!-- 总体信息 -->
    <div class="order-total">
      <van-button>联系客服</van-button>
    </div>
  </div>
</template>

<script>
import constants from '@/config/constants'
import orderApi from '@/api/orderApi';

export default {
  data () {
    return {
      /* 当前申请状态 */
      active: 1,
      /* 申请提示信息 */
      applyTip: '',
      /* 申请信息 */
      returnInfo: {}
    }
  },
  created () {
    this.getOrderReturnApplyDetail();
  },
  methods: {
    /* 获取订单售后详情 */
    getOrderReturnApplyDetail () {
      orderApi.orderReturnApplyDetail(this.$route.query.id).then(result => {
        if(result.code == constants.SUCCESS){
          this.returnInfo = result.data;
          if(result.data.returnStatus == '0' || result.data.returnStatus == "1"){
            this.applyTip = '您的申请正在处理中，请点击查看详情';
            this.active = 1;
          }else{
            this.applyTip = '您的申请已经处理完毕，请点击查看详情';
            this.active = 2;
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.applydetail-container{
  margin-bottom: 60px;
  padding-top: 10px;
  .status{
    margin: 0px 10px;
    border-radius: 5px;
    background: #e9b461;
    .van-steps__items{
      margin: 10px 10px 18px 10px;
    }
    /deep/ .middle{
      .van-step__title{
        -webkit-transform: translateX(-27%);
        transform: translateX(-27%);
      }
      .van-step__title--active{
        -webkit-transform: translateX(-30%);
        transform: translateX(-30%);
      }
    }
    /deep/ .van-step--horizontal{
      .van-step__circle-container{
        background: #e9b461;
      }
    }
  }
  .return-info{
    width: inherit;
    margin-top: 10px;
    /deep/ .van-cell__value{
      display: flex;
      align-items: center;
      flex: none;
    }
  }
  .return-money{
    width: inherit;
    height: 50px;
    align-items: center;
    /deep/ .van-cell__value{
      color: #E50808;
    }
  }
  .order-goods-list{
    background: #fff;
    .order-goods-item{
      padding: 0;
    }
  }
  .pay-info{
    background: #fff;
    display: flex;
    flex-direction: column;
    .item{
      display: flex;
      align-items: center;
      height: 25px;
      line-height: 25px;
      .title{
        font-size: 14px;
        color: #999;
        margin-right: 15px;
      }
      .text{
        font-size: 14px;
        color: #333;
      }
    }
  }
  .order-total{
    border-top: 1px solid #f6f6f6;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    height: 50px;
    width: 100%;
    padding-right: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .van-button{
      height: 35px;
    }
  }
}
</style>
